<template>
    <div>
        <div class="head f f-a-c">
            <div class="lef bor f f-j-c f-d-c">
                <div class="top">剩余流量总额(M)</div>
                <div class="count">{{ obj.surplus_traffic }}</div>
            </div>
            <div class="rig f f-j-c f-d-c">
                <div class="top">本月已使用(M)</div>
                <div class="count">{{ obj.month_traffic }}</div>
            </div>

        </div>
        <!-- 图表 -->
        <div class="tit">
            <div class="main" id="main">

            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import { GetTraffic } from '../../api/index'

let obj = ref({})
let dataList = ref([])
let dateList = ref([])
onMounted(() => {
    initList()
    setTimeout(() => {
        comip()
    }, 500)

})
const initList = async () => {
    let n = await GetTraffic()
    obj.value = n.content
    // 处理名字
    dataList.value = n.content.list.map(item => {
        return {
            value: item.traffic, itemStyle: {
                color: '#32bbea'
            }
        }
    })
    dateList.value = n.content.list.map(item => {
        return item.format_time
    })
    console.log(dataList.value, dateList.value, '8999999999999999999999999999');
}
const comip = () => {
    let myChart = echarts.init(document.getElementById('main'));
    // console.log(myChart, '00000000000000000000000000000000000000000000000000');
    myChart.setOption({
        title: {
            text: '流量统计图'
        },
        tooltip: {},
        xAxis: {
            data: dateList.value
            // dateList.value
        },
        yAxis: {},
        series: [
            {
                name: '流量',
                type: 'bar',
                barWidth: 50,
                data: dataList.value
            }
        ]
    });
    console.log('121212122121121212');
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 18.4) * 1vw;
}


.head {
    width: 100%;
    height: pxfn(114);
    padding: pxfn(15);
    border-radius: pxfn(15);
    background-color: #fff;

    .bor {
        border-right: pxfn(1) solid #edf3fa;
    }

    .lef {
        width: 50%;
        // background-color: pink;
        height: 100%;
    }

    .rig {
        width: 50%;
        height: 100%;
        // background-color: aquamarine;
        padding-left: pxfn(30);
    }

    .top {
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-400;
        font-weight: 400;
        text-align: LEFT;
        color: #868d9c;
    }

    .count {
        font-size: pxfn(32);
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        color: #1d2129;
    }
}

.tit {
    margin-top: pxfn(40);
    // width: 87.5vw;
    width: 100%;
    // margin-top: 50%;
    height: 55vh;
    padding: pxfn(15);
    background-color: #fff;
    border-radius: pxfn(10);
}

.main {
    height: 100% !important;
    width: 100%;
}
</style>